<template>
  <div>
    <template>
      <el-table
        :data="cardList"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          width="100">
        </el-table-column>
        <el-table-column
          label="名字"
          prop="name"
          width="100">
        </el-table-column>
        <el-table-column
          label="性别"
          prop="sex"
          width="100">
        </el-table-column>
        <el-table-column
          label="公司"
          prop="company"
          width="100">
        </el-table-column>
        <el-table-column
          label="职位"
          prop="position"
          width="100">
        </el-table-column>
        <el-table-column
          label="手机"
          prop="mobile"
          width="150">
        </el-table-column>
        <el-table-column
          label="浏览量"
          prop="visited"
          width="100">
        </el-table-column>
        <el-table-column
          prop="birthday"
          label="出生日期">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleLook(scope.row)">查看
            </el-button>
            <el-button
              size="mini"
              :type="scope.row.type"
              @click="handleLike(scope.row)">喜欢
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!--  分页显示  -->
    <div :class="pageClass">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--  弹框  -->
    <el-dialog
      title="查看名片"
      :visible.sync="dialogVisible"
      width="30%">
      <p>ID: {{ cardInfo.id }}</p>
      <p>名字: {{ cardInfo.name }}</p>
      <p>性别: {{ cardInfo.sex }}</p>
      <p>公司: {{ cardInfo.company }}</p>
      <p>职位: {{ cardInfo.position }}</p>
      <p>手机: {{ cardInfo.mobile }}</p>
      <p>浏览量: {{ cardInfo.visited }}</p>
      <p>出生日期: {{ cardInfo.birthday }}</p>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="handleClose">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'CardLike',
    data() {
      return {
        user: this.$store.getters.getUser, // 获取了登录人的信息
        msg: '卡片列表',
        pageClass: "myPage",
        pageSize: 10,
        currentPage: 1, //默认显示的第几页,真实是数据是后端返回的
        total: 10, // 总共多少条数据,真实是数据是后端返回的
        dialogVisible: false,
        cardList: [],
        cardInfo: {
          id: 0,
          name: '',
          sex: '',
          birthday: '',
          company: '',
          position: '',
          mobile: '',
          visited: 0
        }
      }
    },
    methods: {
      handleLook(row) {
        let vm = this;
        this.axios({
          url: `http://localhost:9090/card/view/${row.id}`,
          method: 'GET'
        }).then(function (res) {
          vm.cardInfo = res.data.data;
        });
        this.dialogVisible = true;
      },
      handleClose() {
        // 对话框关闭的时候 重新查询了名片列表
        this.getCardList(this.currentPage, this.pageSize);
        this.dialogVisible = false;
      },
      // 处理喜欢/不喜欢/删除喜欢的名片
      handleLike(row) {
        // row 就是你点击的当前行的名片
        let vm = this;
        // 当前登录人喜欢的名片列表liked中有没有当前行这个名片
        let likeOrUnLike = vm.user.liked.indexOf(row.id) === -1;
        console.log(likeOrUnLike);
        this.axios({
          url: `http://localhost:9090/user/like?uid=${vm.user.id}&cid=${row.id}&like=${likeOrUnLike}`,
          method: 'GET'
        }).then(function (res) {
          console.log(res.data.data);
          // 更新当前页面上的用户对象
          vm.user = res.data.data;
          vm.$store.commit("updateUser", res.data.data);
          vm.getCardList(vm.currentPage, vm.pageSize);
        });
      },
      // 每页显示几条数据
      handleSizeChange(pageSize) {
        // 查询用户列表
        this.getCardList(this.currentPage, pageSize);
      },
      // 切换第几页
      handleCurrentChange(pageIndex) {
        // 查询用户列表
        this.getCardList(pageIndex, this.pageSize);
      },
      getCardList(pageIndex, pageSize) {
        // 发送axios请求
        let vm = this;
        this.axios({
          url: `http://localhost:9090/card/page?pageIndex=${pageIndex}&pageSize=${pageSize}`,
          method: 'GET'
        }).then(function (res) {
          // 获取名片列表
          let list = res.data.data.list;
          list.forEach(card => {
            if (vm.user.liked.indexOf(card.id) === -1) {
              // 不喜欢的名片背景使用了白色
              card.type = '';
            } else {
              // 喜欢的名片 背景设置了红色
              card.type = 'danger';
            }
          })
          vm.cardList = list;
          vm.total = res.data.data.total;
          vm.pageSize = res.data.data.pageSize;
          vm.currentPage = res.data.data.pageNum;
        });
      }
    },
    mounted() {
      this.getCardList(this.currentPage, this.pageSize);
    }
  }
</script>

<style scoped>
  .myPage {
    margin-top: 40px;
    text-align: center;
  }
</style>
